<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>首页</title>
    <script src="./js/axios.js"></script>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/nav.css">
    <style>
        article{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 2rem;
            background-image: linear-gradient( #ede5e5 0%, #af9d99 90%);
        }
        .card{

            margin-top: 2rem;
        }
        .card:hover{
            color: red;
            cursor: pointer;
            text-decoration:underline
        }
    </style>
</head>

<body>
    
    <!-- 头部的导航栏 -->
    <header>
        <nav>
            <h1>当时热点新闻</h1>
        </nav>
        <p>每十分钟更新一次</p>
    </header>
    <article id="app">

        <div v-for="(item,i) in data">
                <div class="card" @click='goto(i)'>
                    {{ item.text }}
                </div>
        </div>
          
      

    </article>
   
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            data:[]
        },
        methods: {
            goto(e){
                console.log(e)
                location.href = "http://127.0.0.1:8000/static/html/article.html?index="+e
            }
        },
    })
    let url = "http://127.0.0.1:8000/"
    axios.get(url + "api/index").then(res => {
        this.app.data = res.data.data.result
        console.log(this.app.data)
    })
  
</script>

</html>